<template>
	<div>
		<el-container>
			<el-main>
				<el-form :model="formInline">
					<el-row>
						<el-col :span="3">
							<el-form-item>
								<span style="font-size:medium;">患者信息查询: </span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="4">
							<el-form-item >
								<span><a class="RedStar">*</a> 病历号: </span>
								<el-input placeholder="病历号" style="width:50%" v-model="formInline.medicalNum" maxlength="4" minlength="4" @clear="clear()" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="2">
							<el-button @click="getPatient()">搜索</el-button>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="2">
							<el-form-item>
								<span style="font-size:medium; padding-left: 15px;">患者信息: </span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="2">
							<el-form-item style="text-align: right; padding-right: 20px;">
								<a class="RedStar">*</a> 姓 名 :
							</el-form-item>
						</el-col>
						<el-col :span="2" style="text-align: left;">
							<el-input placeholder="姓名" v-model="formInline.name" disabled ></el-input>
						</el-col>
						<el-col :span="3">
							<el-form-item style="text-align: right; padding-right: 20px;">
								身份证号 :
							</el-form-item>
						</el-col>
						<el-col :span="4" style="text-align: left;">
							<el-input placeholder=" 身份证号" v-model="formInline.ID" disabled></el-input>
						</el-col>
						<el-col :span="2" style="text-align: right; padding-right: 20px;">
							<el-form-item>
								住址:
							</el-form-item>
						</el-col>
						<el-col :span="4" style="text-align: left;">
							<el-input placeholder="住址" v-model="formInline.address" disabled></el-input>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="3">
							<el-form-item>
								<span style="font-size:medium; ">患者挂号信息: </span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col style="padding-left: 30px;">
							<el-form-item>
						<el-table :data="returnReg" style="width: 100%">
							<el-table-column prop="medicalNum" label="病历号">
							</el-table-column>
							<el-table-column prop="name" label="姓名">
							</el-table-column>
							<el-table-column prop="department" label="科室">
							</el-table-column>
							<el-table-column prop="doctor" label="医生">
							</el-table-column>
							<el-table-column prop="charge" label="缴费方式">
							</el-table-column>
							<el-table-column prop="fee" label="费用">
							</el-table-column>
							<el-table-column prop="lookDate" label="看诊日期">
							</el-table-column>
							<el-table-column prop="regStatus" label="挂号状态">
							</el-table-column>
							<el-table-column  label="操作">
								<template slot-scope="scope">
								        <el-button @click="returnNum(scope.$index, returnReg)" >退号</el-button>
								</template>
							</el-table-column>
						</el-table>
						</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		
		data() {
			return {
				formInline: {
					user: '',
					region: '',
					name:'',
					ID:'',
					address:''
				},
				returnReg: [],
				menu:'',
				medicalNum:''
			}
		},
		methods: {
			handleClick(index, returnReg){
				returnReg[index].fee=returnReg[index].fee+1;
			},
			returnNum(index,returnReg){
				if(returnReg[index].regStatus=="未过期")
				    {
						returnReg.splice(index, 1);
						alert("退号成功！");
					}
				else{
					alert("该号已过期,不能退号");
					}
					
			},
			getPatient(){
				this.$axios.get('http://localhost:8080/returnReg.json').then((result) => {
					
					this.formInline.name = "";
					this.formInline.ID ="";
					this.formInline.address = "";
					let obj = {};
					obj=result.data.filter((item) => {
						return item.medicalNum === this.formInline.medicalNum;
						
					});
					console.log(obj);
					if (obj) {
						this.formInline.name = obj[0].name;
						this.returnReg = obj; //写法固定
						
					} else {
						alert("查无此号！");
					}
					
				}).catch((err) => {
					console.log(err);
				});
				this.$axios.get('http://localhost:8080/PatientInfo.json').then((result) => {
					
					
					let obj = {};
					obj=result.data.find((item) => {
						return item.medicalNum === this.formInline.medicalNum;
					});
					if (obj) {
						this.formInline.ID = obj.ID;
						this.formInline.address = obj.address;
					}
					else
					   alert("查无此号！");
				}).catch((err) => {
					console.log(err);
				});
			},
			clear(){
				this.formInline.name = "";
				this.formInline.ID ="";
				this.formInline.address = "";
				this.returnReg=[];
				
			}
		}
	}
</script>

<style>
	.RedStar {
		color: red;
	}

	.left {
		text-align: left;
	}
</style>
